<div class="row">
  <div class="col-md-6">
    <div class="box box-primary">
      <form name="eventForm">
        <div class="box-header">
          <h3 class="box-title">Event form</h3>

          <div class="box-tools pull-right">
          </div>
        </div>
        <div class="box-body">
          <formly-form fields="formFields" model="formData" options="formOptions"></formly-form>
        </div>
        <div class="box-footer">
          <div class="controls">
            <button type="submit" class="btn btn-primary btn-success" ng-click="onSubmit(formData)"
                    ng-disabled="eventForm.$invalid">Submit
            </button>
            <button type="button" class="btn btn-default" ng-click="formOptions.resetModel()">Reset</button>
          </div>
        </div>
        <div ng-if="loading" class="overlay"></div>
        <div ng-if="loading" class="loading-img"></div>
      </form>
    </div>
  </div>
  <div class="col-md-6">
    <div class="box box-primary">
      <div class="box-header">
        <h3 class="box-title">File upload button</h3>
      </div>
      <div class="box-body">
                <span class="file-input btn btn-primary btn-file">
                    Browse&hellip; <input type="file" multiple ng-bind="uploads">
                </span>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="box box-primary">
      <div class="box-header">
        <h3 class="box-title">Datepicker</h3>

        <div class="box-tools pull-right">
        </div>
      </div>
      <div class="box-body">
        <div ng-controller="DatepickerDemoCtrl">
          <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>

          <h4>Inline</h4>

          <div style="display:inline-block; min-height:290px;">
            <datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm"></datepicker>
          </div>

          <h4>Popup</h4>

          <div class="row">
            <div class="col-md-6">
              <p class="input-group">
                <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt"
                       is-open="opened" min-date="minDate" max-date="'2015-06-22'"
                       datepicker-options="dateOptions" date-disabled="disabled(date, mode)"
                       ng-required="true" close-text="Close"/>
                      <span class="input-group-btn">
                        <button type="button" class="btn btn-default" ng-click="open($event)"><i
                          class="glyphicon glyphicon-calendar"></i></button>
                      </span>
              </p>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
              <label>Format:</label> <select class="form-control" ng-model="format"
                                             ng-options="f for f in formats">
              <option></option>
            </select>
            </div>
          </div>

          <hr/>
          <button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button>
          <button type="button" class="btn btn-sm btn-default" ng-click="dt = '2009-08-24'">2009-08-24
          </button>
          <button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
          <button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()"
                  tooltip="After today restriction">Min date
          </button>
        </div>
      </div>
      <div class="box-footer">
        <div class="controls">
          <button class="btn btn-primary btn-success" ng-click="onSubmit()">Submit</button>
          <button class="btn btn-default" ng-click="reset()">Cancel</button>
        </div>
      </div>
      <div ng-if="loading" class="overlay"></div>
      <div ng-if="loading" class="loading-img"></div>
    </div>
  </div>
</div>

<script type="text/ng-template" id="datepicker.html">
  <p class="input-group">
    <input type="text"
           id="{{::id}}"
           name="{{::id}}"
           ng-model="model[options.key]"
           class="form-control"
           ng-click="datepicker.open($event)"
           datepicker-popup="{{to.datepickerOptions.format}}"
           is-open="datepicker.opened"
           datepicker-options="to.datepickerOptions"
      />
        <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="datepicker.open($event)">
              <i class="glyphicon glyphicon-calendar"></i>
            </button>
        </span>
  </p>
</script>
